<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用CDN方式引入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
    <!--引入axios资源-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>

</head>
<body>
<h1>Vue获取表单数据</h1>
<div id="app">
    <form name="regForm" action="regok.html" v-on:submit.prevent="onSubmit" method="post">
        <table>
            <tr>
                <td class="title">用户名：</td>
                <td><input type="text" name="username" v-model="user.username"/></td>
            </tr>
            <tr>
                <td class="title">密码：</td>
                <td><input type="password" name="password" v-model="user.password"/></td>
            </tr>
            <tr>
                <td class="title">确认密码：</td>
                <td><input type="password" name="confirmpass"/></td>
            </tr>
            <tr>
                <td class="title">电子邮箱：</td>
                <td><input type="text" name="email" v-model="user.email"/></td>
            </tr>
            <tr>
                <td class="title">性别：</td>
                <td><input type="radio" value="M" name="gender" v-model="user.gender"/>男<input type="radio" value="F"
                                                                                               name="gender"
                                                                                               v-model="user.gender"/>女
                </td>
            </tr>
            <tr>
                <td class="title">学历：</td>
                <td>
                    <select name="education" v-model="user.education">
                        <option value="-1" selected>-----请选择-----</option>
                        <option value="0">文盲</option>
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                        <option value="4">大专</option>
                        <option value="5">本科</option>
                        <option value="6">硕士</option>
                        <option value="7">博士</option>
                        <option value="8">博士后</option>
                        <option value="9">圣斗士</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="title">出生日期：</td>
                <td><input type="date" name="birthday" value="" v-model="user.birthday"/></td>
            </tr>
            <tr>
                <td class="title">爱好：</td>
                <td>
                    <!--复选框name名字必须一样-->
                    <input type="checkbox" name="favorites" value="read" v-model="user.favorites"/>读书
                    <input type="checkbox" name="favorites" value="music" v-model="user.favorites"/>音乐
                    <input type="checkbox" name="favorites" value="internet" v-model="user.favorites"/>上网
                    <input type="checkbox" name="favorites" value="nba" v-model="user.favorites"/>NBA
                </td>
            </tr>
            <tr>
                <td class="title">自我介绍：</td>
                <td><textarea rows="10" cols="25" v-model="user.introduce"></textarea></td>
            </tr>
            <tr>
                <td class="title">上传照片：</td>
                <td><input type="file" name="pic" v-on:change="getPicture()" ref="inputfile"/></td>
            </tr>
            <tr>
                <td class="title">是否接受条款：</td>
                <td><input type="checkbox" name="accept" v-model="user.accept"/>我无条件接受霸王条款</td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center"><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            user: {
                username: '',
                password: '',
                email: '',
                gender: 'M',
                education: '',
                birthday: '',
                favorites: [],
                pic: {},
                introduce: '',
                accept: false
            }
        },
        methods: {
            onSubmit() {
                if (this.user.username) {
                    console.log('*******提交表单******');
                    console.log(this.user);
                } else {
                    alert('请输入用户名')
                }
            },
            getPicture() {
                let fileDom = this.$refs.inputfile;
                this.user.pic = fileDom.files[0];
            }
        }
    })
</script>
</body>
</html>
